<template>
	<view class="settings-container">
		<!-- 主要内容区域 -->
		<view class="content">
			<!-- 用户信息区域 -->
			<view class="user-section">
				<view class="user-item" @click="goToProfile">
					<view class="user-avatar">
						<u-avatar
							:src="userInfo.avatar"
							size="80"
							shape="circle"
							:defaultSrc="defaultAvatar"
						></u-avatar>
					</view>
					<view class="user-info">
						<text class="username">{{ userInfo.nickname || 'u5496' }}</text>
						<text class="profile-text">个人信息</text>
					</view>
					<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
				</view>
			</view>
			
			<!-- 账户管理 -->
			<view class="settings-group">
				<view class="group-title">账户管理</view>
				<view class="settings-list">
					<view class="settings-item" @click="goToAddress">
						<text class="item-label">我的地址</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
					<view class="settings-item" @click="goToPayPassword">
						<text class="item-label">支付密码</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 安全设置 -->
			<view class="settings-group">
				<view class="group-title">安全设置</view>
				<view class="settings-list">
					<view class="settings-item">
						<text class="item-label">手机号码</text>
						<text class="item-value">{{ userInfo.phone || '185****5496' }}</text>
					</view>
					<view class="settings-item" @click="goToChangePassword">
						<text class="item-label">修改密码</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
					<view class="settings-item" @click="goToRecommendation">
						<text class="item-label">个性化推荐</text>
						<view class="item-right">
							<text class="status-text">{{ isRecommendationEnabled ? '开' : '关' }}</text>
							<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
						</view>
					</view>
					<view class="settings-item" @click="goToDeregister">
						<text class="item-label">注销账号</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
			
			<!-- 帮助与支持 -->
			<view class="settings-group">
				<view class="group-title">帮助与支持</view>
				<view class="settings-list">
					<view class="settings-item" @click="goToCustomerService">
						<text class="item-label">联系客服</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
					<view class="settings-item" @click="goToTerms">
						<text class="item-label">服务条款</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
					<view class="settings-item" @click="goToPrivacy">
						<text class="item-label">隐私政策</text>
						<u-icon name="arrow-right" size="32" color="#c0c4cc"></u-icon>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 退出登录按钮 -->
		<view class="logout-section">
			<u-button
				type="error"
				text="退出登录"
				@click="handleLogout"
				class="logout-btn"
			></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatar: '',
					nickname: 'u5496',
					phone: '185****5496'
				},
				defaultAvatar: '/static/logo.png',
				isRecommendationEnabled: true
			}
		},
		methods: {
			// 显示更多选项
			showMoreOptions() {
				uni.showActionSheet({
					itemList: ['帮助', '关于我们', '意见反馈'],
					success: (res) => {
						console.log('选择了第' + (res.tapIndex + 1) + '个按钮');
					}
				});
			},
			
			// 跳转到个人信息
			goToProfile() {
				uni.navigateTo({
					url: '/pages/profile/profile'
				});
			},
			
			// 跳转到地址管理
			goToAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				});
			},
			
			// 跳转到支付密码
			goToPayPassword() {
				uni.navigateTo({
					url: '/pages/paypassword/paypassword'
				});
			},
			
			// 跳转到修改密码
			goToChangePassword() {
				uni.navigateTo({
					url: '/pages/change-password/change-password'
				});
			},
			
			// 跳转到个性化推荐
			goToRecommendation() {
				uni.navigateTo({
					url: '/pages/recommendation/recommendation'
				});
			},
			
			// 跳转到注销账号
			goToDeregister() {
				uni.navigateTo({
					url: '/pages/deregister/deregister'
				});
			},
			
			// 跳转到联系客服
			goToCustomerService() {
				uni.navigateTo({
					url: '/pages/message/message'
				});
			},
			
			// 跳转到服务条款
			goToTerms() {
				uni.navigateTo({
					url: '/pages/terms of service/terms of service'
				});
			},
			
			// 跳转到隐私政策
			goToPrivacy() {
				uni.navigateTo({
					url: '/pages/privacy-policy/privacy-policy'
				});
			},
			
			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除用户数据
							uni.removeStorageSync('userInfo');
							uni.removeStorageSync('token');
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							});
							
							// 返回登录页或首页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index'
								});
							}, 1500);
						}
					}
				});
			},
			
			// 加载用户信息
			loadUserInfo() {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = { ...this.userInfo, ...JSON.parse(storedUserInfo) };
				}
				
				// 加载个性化推荐设置
				const recommendationSetting = uni.getStorageSync('personalizedRecommendation');
				if (recommendationSetting !== null && recommendationSetting !== undefined) {
					this.isRecommendationEnabled = recommendationSetting;
				}
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		onShow() {
			// 页面显示时重新加载用户信息
			this.loadUserInfo();
		}
	}
</script>

<style lang="scss" scoped>
.settings-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	
	.content {
		flex: 1;
		padding: 20rpx;
		
		.user-section {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			
			.user-item {
				display: flex;
				align-items: center;
				padding: 30rpx;
				
				&:active {
					background-color: #f8f8f8;
				}
				
				.user-avatar {
					margin-right: 20rpx;
				}
				
				.user-info {
					flex: 1;
					
					.username {
						display: block;
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}
					
					.profile-text {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}
		
		.settings-group {
			background-color: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			
			.group-title {
				padding: 20rpx 30rpx 10rpx;
				font-size: 26rpx;
				color: #999;
				font-weight: 500;
			}
			
			.settings-list {
				.settings-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx;
					border-bottom: 1rpx solid #f0f0f0;
					
					&:last-child {
						border-bottom: none;
					}
					
					&:active {
						background-color: #f8f8f8;
					}
					
					.item-label {
						font-size: 32rpx;
						color: #333;
					}
					
					.item-value {
						font-size: 28rpx;
						color: #666;
					}
					
					.item-right {
						display: flex;
						align-items: center;
						
						.status-text {
							font-size: 28rpx;
							color: #666;
							margin-right: 10rpx;
						}
					}
				}
			}
		}
	}
	
	.logout-section {
		padding: 20rpx 40rpx 40rpx;
		
		.logout-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 500;
			background: linear-gradient(135deg, #ff4757, #ff3742);
			border: none;
			
			&:active {
				transform: scale(0.98);
			}
		}
	}
}
</style> 